<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Admin Dashboard - Home</title>
<meta name="description" content="">
<meta name="author" content="templatemo">
<!-- 
    Visual Admin Template
    https://templatemo.com/tm-455-visual-admin
    -->
<link
	href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700'
	rel='stylesheet' type='text/css'>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/templatemo-style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery-1.11.2.min.js"></script>
<!-- jQuery -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<!--  jQuery Migrate Plugin -->
<!--  <script src="https://www.google.com/jsapi"></script>Google Chart -->
<script type="text/javascript" src="js/templatemo-script.js"></script>
<!-- Templatemo Script -->
<script src="js/jquery.cookie.js"></script>
<script>
	if(typeof($.cookie("email"))  == "undefined"){
    		 alert("请先登录");
    		 window.location.href="../login&regist.html";
    }

	function Color(){
     this.r = Math.floor(Math.random()*255);
     this.g = Math.floor(Math.random()*255);
     this.b = Math.floor(Math.random()*255);
     return 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
   }
	var rank;
	$.ajax({
		type:"get",
		url:"../getrank",
		async:true,
		success:function(res){
			rank=JSON.parse(res);
			html = "";
			var cj= 1 / rank[0]["finish"] ;
			cj -= 1;
			
			for(var i=0;i<rank.length;i++){
				
	   html+="<div class=\"media\">\r\n";
	   html+="<i style=\"    position: absolute;  right: 10%;\"> 完成度  : "+(rank[i]["finish"]*100).toFixed(4)+"%</i>";
	   html+="		<div class=\"media-left\">"+rank[i]["email"]+"</div>\r\n";
	   html+="		<div class=\"progress\">\r\n";
	   html+="		<div class=\"progress-bar progress-bar-info\" role=\"progressbar\"\r\n";
	   html+="				aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n" ;
	   html+="				style=\"width: "+rank[i]["finish"]*100*cj+"%;\ background-color:"+Color();
	   html+=";\"></div> </div> </div>";

				
			}
			console.log(html);
			$("#rank").html(html);
			
			
		}
	});
	
</script>
</head>
<body>
	<!-- Left column -->
	<div class="templatemo-flex-row">
		<div class="templatemo-sidebar">
			<header class="templatemo-site-header">
				<div class="square"></div>
				<h1>Visual Admin</h1>
			</header>
			<div class="profile-photo-container">
				<img src="images/profile-photo.jpg" alt="Profile Photo"
					class="img-responsive">
				<div class="profile-photo-overlay"></div>
			</div>
			<!-- Search box -->
			<!--<form class="templatemo-search-form" role="search">
				<div class="input-group">
					<button type="submit" class="fa fa-search"></button>
					<input type="text" class="form-control" placeholder="Search"
						name="srch-term" id="srch-term">
				</div>
			</form>-->
			<div class="mobile-menu-icon">
				<i class="fa fa-bars"></i>
			</div>
			<nav class="templatemo-left-nav">
				<ul>
					<li><a href="index.html"><i class="fa fa-home fa-fw"></i>主页</a></li>
					<li><a href="Memorize_words.html"><i
							class="fa fa-bar-chart fa-fw"></i>背单词</a></li>
					<li><a href="Ranking.html" class="active"><i
							class="fa fa-database fa-fw"></i>排行榜</a></li>
					<li><a href="words.html"><i class="fa fa-map-marker fa-fw"></i>words</a></li>
					<li><a href="records.html"><i class="fa fa-users fa-fw"></i>单词记录</a></li>
					<li><a href="Test.html"><i
							class="fa 	fa fa-align-justify fa-fw"></i>单词复习</a></li>
					<li><a href="myinfo.html"><i class="fa fa-bar-chart fa-fw"></i>个人信息</a></li>
					<li><a href="setting.html"><i class="fa fa-sliders fa-fw"></i>设置</a></li>
					<li><a href="../login&regist.html"><i
							class="fa fa-eject fa-fw"></i>注销</a></li>
				</ul>
			</nav>
		</div>

		<div class="templatemo-content col-1 light-gray-bg"
			style="padding-top: 3em;">

			<div class="templatemo-content-container">
				<div class="templatemo-flex-row flex-content-row">

					<div class="templatemo-content-widget white-bg col-1">
						<i class="fa fa-times"></i>
						<h2 class="text-uppercase" style="margin-top: 20px;">rank</h2>
						<h3 class="text-uppercase" style="margin-top: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;
							—————未来的你会感谢现在努力的自己！！！！</h3>


<!--
						<div class="input-group top1">
							<button type="submit" class="fa fa-search"
								style="background-color: black;"></button>
							<input type="text" class="form-control" placeholder="输入email查询排名"
								id="srch-term" style="margin-left: 40px;">
							<div class="suggestion-list.hidden" id="sulist"
								style="width: 80%;"></div>
						</div>-->


						<hr>


						<div id="rank">
					<!--		style="width: 1100px; height: 700px; overflow-x: auto; overflow-y: auto;">-->


							<div class="media">
								<div class="media-left">566666666666</div>
								<div class="progress">
									<div class="progress-bar progress-bar-info" role="progressbar"
										aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
										style="width: 60%;"></div>
								</div>
							</div>




						</div>





					</div>
				</div>

			</div>
		</div>



		<script type="text/javascript" src="js/templatemo-script.js"></script>
		<!-- Templatemo Script -->
</body>
</html>